import classNames from "classnames";
import type { FC } from "react";
import contentStyle from "../../index.module.scss";
import styles from "./index.module.scss";
import Loading from "@/app/components/Loading";

interface IndexProps {
  onCancel: () => void;
  onConfirm: () => void;
  onDelete?: (() => void) | boolean;
  loading: boolean;
  hasChanged?: boolean;
}

const Index: FC<IndexProps> = ({ onCancel, onConfirm, onDelete, loading }) => {
  return (
    <div className={classNames(styles.bottomBtn, contentStyle.card)}>
      {onDelete ? (
        <div
          className={styles.delBtn}
          onClick={() => {
            if (typeof onDelete === "function") {
              onDelete();
            }
          }}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width={14}
            fill="none"
            viewBox="0 0 17 17"
          >
            <path
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="1.5"
              d="M13.38 7.258s-.361 4.49-.571 6.382c-.1.903-.658 1.432-1.572 1.449-1.74.031-3.481.033-5.22-.003-.88-.018-1.428-.554-1.526-1.442-.211-1.908-.571-6.386-.571-6.386M14.302 5.106H2.997M12.124 5.106c-.523 0-.974-.37-1.076-.883l-.162-.81a.853.853 0 00-.825-.633H7.24a.853.853 0 00-.825.632l-.162.811a1.099 1.099 0 01-1.076.883"
            ></path>
          </svg>
          删除
        </div>
      ) : (
        <div></div>
      )}

      <div className={styles.btns}>
        <div className={styles.cancel} onClick={onCancel}>
          取消
        </div>
        <div
          className={classNames(styles.save)}
          onClick={() => {
            if (loading) {
              return;
            }
            onConfirm();
          }}
        >
          {loading ? <Loading style={{ width: "20px" }} /> : null}
          保存
        </div>
      </div>
    </div>
  );
};

export default Index;
